<template>
  <div class="login-container">
    <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle" :particleSize="4"
      linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi">
    </vue-particles>
    <div class="frosted-glass select" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
      <div class="form" style="z-index: 99;">
        <h1 style="text-align: center;font-size: 25px;margin-bottom: 25px;">药云记管理后台系统</h1>
        <el-form ref="form" label-width="80px" :rules="rules" :model="user">
          <el-form-item label="账号：" prop="jobId">
            <el-input v-model="user.jobId" clearable placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input show-password v-model="user.password" clearable placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码：" prop="code">
            <div style="display: flex;align-items: center;height: 40px;">
              <div style="width: calc(100% - 125px);">
                <el-input @keyup.enter.native="login" v-model="user.code" clearable placeholder="请输入验证码"></el-input>
              </div>
              <div style="width: 100px;margin-left: 25px;height: 40px;">
                <el-image @click="getCaptcha" :src="image" style="width: 100px;height: 40px;border-radius: 4px;cursor: pointer;"></el-image>
              </div>
            </div>
          </el-form-item>
          <el-form-item style="text-align: center;">
            <el-button @click="login" type="primary" style="width: 150px;position: relative;left: -25px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookie from "js-cookie"
  export default {
    name: "login",
    data() {
      return {
        image: '',
        user: {
          jobId: '',
          password: '',
          code: '',
          codeToken: ''
        },
        rules: {
          jobId: [{
            trigger: 'blur',
            message: '请输入账号',
            required: true
          }],
          password: [{
            trigger: 'blur',
            message: '请输入密码',
            required: true
          }],
          code: [{
            trigger: 'blur',
            message: '请输入验证码',
            required: true
          }]
        }
      }
    },
    methods: {
      getCaptcha() {
        this.$get("/user/verification_code").then(res => {
          if (res.code == 200) {
            this.user.code = ""
            this.image = res.data.image
            this.user.codeToken = res.data.token
          }
        })
      },
      login() {
        this.$refs['form'].validate(flag => {
          if (flag) {
            this.$post('/user/admin', this.user, 'LGYNDZJN').then(res => {
              if (res.code == 200) {
                Cookie.set('token', res.data, {
                  expires: 7
                })
                this.$message.success("登录成功")
                this.$router.replace("/home")
                this.$get("/user/user_info").then(res => {
                  if (res.code == 200) this.$store.commit("setUser", res.data)
                })
              }
            })
          }
        })
      }
    },
    created() {
      this.getCaptcha()
      let token = Cookie.get('token')
      if (token) {
        window.localStorage.clear()
        window.sessionStorage.clear()
        this.$store.commit("reset")
        Cookie.remove("token")
      }
    }
  }
</script>

<style lang="scss" scoped>
  $bg: #2d3a4b;

  >>>.el-form-item__label {
    color: #fff;
  }

  .login-container {
    position: fixed;
    min-height: 100%;
    width: 100%;
    background-color: $bg;

    .frosted-glass {
      position: fixed;
      top: 50px;
      width: 30vmax;
      box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(20px);
      transition: 0.5s ease;
      border-radius: 5px;

      .form {
        padding-left: 0.375em;
        font-size: 1em;
        font-weight: 200;
        color: white;
        box-sizing: border-box;
        padding: 15px;
      }
    }
  }
</style>
